import React, { useEffect, useState, useMemo } from 'react';
import { Dot, L7Plot } from '@antv/l7plot';
import { DOCNAME, ip, port } from '../constants/index';
import { Query } from '../../gis/utils/Query';
import { getMap } from '../common/map';
import HeaderView from '../components/HeaderView.jsx';
const DataVis = () => {
  const [map, setMap] = useState();
  useEffect(() => {
    setMap(getMap(false));
    Query.queryByLayer({
      service,
      callback: querySuccess,
    });
  }, []);

  const service = { docName: DOCNAME, layerId: '1,2' };

  const querySuccess = (result) => {
    var format = new Zondy.Format.PolygonJSON();
    //将MapGIS要素JSON反序列化为ol.Feature类型数组
    var features = format.read(result.value[1]);
    const road = format.read(result.value[0]);
    console.log(road[0]);
    const roadValue = road.map((item) => {
      return {
        line_id: item.values_.values_.ID,
        道路名称: item.values_.values_['道路名称'],
        车流量: item.values_.values_['车流量'],
        lnglat: item.getGeometry().getCoordinates(),
      };
    });
    const geoValue = features.map((item) => {
      return {
        x: item.geometryChangeKey_.target.flatCoordinates[0],
        y: item.geometryChangeKey_.target.flatCoordinates[1],
        ...item.values_.values_,
      };
    });
    new L7Plot('container', {
      map: {
        type: 'mapbox',
        style: 'light',
        center: [114.447303, 30.753574],
        zoom: 13,
        pitch: 0,
        token:
          'pk.eyJ1IjoibG9jYWxzaXgiLCJhIjoiY2w1cTI5dGl2MXFoZzNkcHhjOGE2engyeCJ9.RwsxPwjBGb3LyuJrjqQ05Q',
      },
      plots: [
        {
          name: 'dotPoint',
          type: 'dot',
          source: {
            data: geoValue,
            parser: { type: 'json', x: 'x', y: 'y' },
          },
          color: {
            field: '事件等级',
            value: ['#82cf9c', '#10b3b0', '#2033ab'],
            scale: { type: 'quantize' },
          },
          size: {
            field: '事件等级',
            value: ({ 事件等级 }) => (事件等级 - 0.5) * 5,
          },
          style: {
            opacity: 0.8,
            strokeWidth: 0,
          },
          state: {
            active: { color: '#FFF684' },
          },
          tooltip: {
            items: ['事件等级'],
          },
          autoFit: true,
          zoom: {
            position: 'topright',
          },
          scale: {
            position: 'bottomright',
          },
        },
        {
          name: 'road',
          type: 'path',
          source: {
            data: roadValue,
            parser: {
              type: 'json',
              coordinates: 'lnglat',
            },
          },
          size: {
            field: '车流量',
            value: ({ 车流量 }) => 车流量 / 500,
          },
          color: {
            field: '车流量',
            value: ({ 车流量 }) => {
              let red = 16711680;
              let blue = 255;
              let color = ((车流量 - 750) * (red - blue)) / (2000 - 750) + 255;
              return `#${color.toString(16)}`;
            },
          },
          style: {
            // opacity: 0.8,
            // width:''
          },
          state: { active: { color: '#FFF684' } },
          autoFit: true,
          tooltip: {
            items: ['道路名称', '车流量'],
          },
          // zoom: {
          //   position: 'bottomright',
          // },
        },
      ],

      legend: {
        type: 'continue',
        position: 'bottomleft',
        style: {
          width: '100px',
          height: '100px',
        },
        title: '道路拥堵程度',
        // items: [
        //   { color: '#B8EFE2', value: '事故等级<1' },
        //   { color: '#14B4C9', value: '1<事故等级<2' },
        //   { color: '#3771D9', value: '事故等级>3' },
        // ],
        min: '良好',
        max: '拥堵',
        colors: ['blue', 'red'],
      },
    });
  };

  return (
    <div>
      {/* <div id="map" style={{ display: 'false' }}></div> */}
      <HeaderView></HeaderView>
      <div
        id="container"
        style={{
          zIndex: '400',
          width: '100%',
          height: '89vh',
          boxSizing: 'border-box',
        }}
      ></div>
    </div>
  );
};

export default DataVis;
